<template>
  <el-col :span="24">
    <el-col :span="24" class="bg-purple-dark" :style="{height:'540px'}">
      <div class="cardInformation">
        <div class="dataName">活跃走势</div>
        <div class="recentlyDay">更新时间：{{ updateData }}</div>
      </div>
      <div class="card-filters">
        <div class="time-filter" style="margin-left:0">
          <span>统计时间：</span>
          <el-date-picker
            v-model="search.date"
            class="intervalTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-value="search.date"
            :clearable="false"
            @change="getData"
          />
        </div>
      </div>
      <ve-chart v-if="activeTrendData.rows&&!!activeTrendData.rows.length" :data="activeTrendData" :settings="chartSettings" :extend="chartExtend" />
      <NoData v-if="activeTrendData.rows &&!activeTrendData.rows.length" />
    </el-col>
  </el-col>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import NoData from '@/components/NoData'

var minutes = 'YYYY-MM-DD'
var now = new Date() // 当前日期
var nowDayOfWeek = now.getDay() // 今天本周的第几天
var nowDay = now.getDate() // 当前日
var nowMonth = now.getMonth() // 当前月
var nowYear = now.getFullYear() // 当前年

export default {
  name: 'ActiveChart',
  components: {
    NoData
  },
  data() {
    return {
      updateData: moment(now).format(minutes),
      search: {
        date: [],
        beginDate: '',
        endDate: ''
      },
    }
  },
  computed: {
    ...mapState('monitor', [
      'activeTrendData', // 指标卡数据
    ]),
    chartSettings() { // 私有属性
      const chartSettings = {
        type: 'line',
        labelMap: {
          'yyValue': '活跃企业数'
        }
      }
      return {...chartSettings}
    },
    chartExtend() {
      const chartExtend = {
        color: ['#5496F2'],
        legend: {
          selectedMode: false, // 点击事件
          orient: 'horizontal', // 垂直
          right: '1%',
          itemGap: 15, // 间隔
          textStyle: {
            color: '#000',
            fontSize: 15
          }
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#6B6B6B'
            }
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
            inside: true
          }
        },
        yAxis: {
          name: '活跃企业数',
          nameLocation: 'end',
          position: 'left',
          axisLine: {
            show: true,
            color: '#6B6B6B'
          },
          splitLine: {
            lineStyle: {
              type: 'dotted', // 虚线
            }
          }
        },
        series: {
          type: 'line',
          symbolSize: 9,
          smooth: false, // 折线
          lineStyle: {
            width: 3.5
          },
        },
        grid: {
          x: 30,
          x2: 20,
          y: 30,
          y2: 0, // 距离下端位置
        },
      }
      return chartExtend
    }
  },
  created() {
    this.handleTimeNew()
  },
  methods: {
    handleTimeNew() { // handleTimeNew是获取今天的日期
      const weekStartDate = new Date(
        nowYear,
        nowMonth,
        nowDay - nowDayOfWeek - 6
      ) // 上周结束
      now.setDate(now.getDate())
      const beginDate = moment(weekStartDate).format(minutes)
      const endDate = moment(now).format(minutes)
      this.search.date.push(beginDate, endDate)
      this.$store.dispatch('monitor/getActiveTrend', {startDate: beginDate, endDate: endDate})
    },
    getData(e) {
      const beginDate = e && moment(e[0]).format(minutes)
      const endDate = e && moment(e[1]).format(minutes)
      this.$store.dispatch('monitor/getActiveTrend', {startDate: beginDate, endDate: endDate})
    }
  }
}
</script>
<style scoped lang="scss">
    @import './style'
</style>
